<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exceed - Responsive Bootstrap Template</title>

    <!-- stylesheets -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/common.css"/>
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/css/zui.min.css">
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/zui/1.9.1/js/zui.min.js"></script>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css" rel="stylesheet">
    <link href="/css/ionicons.css" rel="stylesheet">
    <!-- <link href="css/linea.css" rel="stylesheet"> -->
    <link href="/css/owl.carousel.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/css/style2.css"/>
    <script type="text/javascript" src="/js/modernizr.custom.28468.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200i,300,300i,400,600,700,700i,900"
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cardo:400,400i,700" rel="stylesheet">
    <style>
       .authors{
           display: inline-block;
           float: right;
       }
    </style>
</head>
<body>
<!-- navbar -->
<header>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container nav-search">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index">Exceed</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse nav-top">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index">首页</a></li>
                    <li class="active"><a href="articleSort">文章</a></li>
					<li  th:if="${session.name==null}"><a href="contact">登录|注册</a></li>
					<li  th:if="${session.name!=null}"><a class="iconfont icon-wodexuanzhong" th:text="${session.name}" href="home"></a></li>
					<li><a href="about">关于我们</a></li>
                </ul>
            </div>
            <div class="search-top">
                <div class="input-group">
                    <div class="input-control search-box search-box-circle has-icon-left has-icon-right search-example"
                         id="searchboxExample">
                        <input id="inputSearchExample3" type="search" class="form-control search-input"
                               placeholder="搜索">
                        <label for="inputSearchExample3" class="input-control-icon-left search-icon"><i
                                class="icon icon-search"></i></label>
                    </div>
                    <span class="input-group-btn">
								<button class="btn btn-primary" type="button" style="height: 34px;">搜索</button>
							</span>
                </div>
            </div>
        </div>
    </nav>
</header>

<!-- header -->
<section class="header">
    <div class="container" >
        <div class="row" >
            <div class="col-md-12">
                <nav class="menu sorts" data-ride="menu">
                    <ul id="treeMenu" class="tree tree-menu" data-ride="tree" style="border: none;">
                        <div class="intro">
                            <h2>文章类别</h2>
                        </div>

                        <li th:each="parent:${sort}" class="fl" style="width: 150px; margin-bottom: 50px;">
                            <a  href="#" style="border: none; font-weight: bold;" th:text="${parent.name}" ></a>
                            <ul>
                                <li th:each="so:${parent.children}"  >
                                    <a  class="sort" th:value="${so.sortId}" th:text="${so.name}"></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>

<!-- articleSort -->

<section class="genius">
    <div class="container" style="margin-top: -100px" >
        <div class="row" style="width: 1220px">
            <div class="col-md-12">
                <h5>这里有很多文章供你选择</h5>
            </div>
            <div class="col-md-6 col-sm-6" style="background: gainsboro;margin: 5px;width: 540px" th:each="parentSort:${sortedArticle}">
                <div class="sort" th:text="${parentSort.sortName}" ></div>
                <div>
                    <ol>
                        <li class="article"  th:each="articles,articlesStat:${parentSort.sortedArticleList}"
                            th:if="${articlesStat.count>0 and articlesStat.count<5}" >
                            <!--<a th:text="${articles.title}"></a>-->
                            <a class="articles" th:value="${articles.id}" th:text="${articles.title}"></a>
                            <p class="authors">
                               <span th:text="${articles.author}"></span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                               <span th:text="${articles.postTime}"></span>
                            </p>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- footer -->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-2  col-sm-3 col-xs-6">
                <div class="footer-logo">
                    <div class="footer-logo-text">Exceed</div>
                    <p>Powered By Download Manager</p>
                </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Links</h3>
                <ul class="list-unstyled links">
                    <li>About</li>
                    <li>Services</li>
                    <li>History</li>
                    <li>Contact Us</li>
                </ul>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Pages</h3>
                <ul class="list-unstyled links">
                    <li>About</li>
                    <li>Services</li>
                    <li>History</li>
                    <li>Contact Us</li>
                </ul>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Legal</h3>
                <ul class="list-unstyled links">
                    <li>About</li>
                    <li>Services</li>
                    <li>History</li>
                    <li>Contact Us</li>
                </ul>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Social</h3>
                <ul class="list-unstyled links">
                    <li><i class="ion ion-social-facebook"></i>facebok</li>
                    <li><i class="ion ion-social-twitter"></i>Twitter</li>
                    <li><i class="ion ion-social-linkedin"></i>Linkedin</li>
                    <li><i class="ion ion-social-googleplus"></i>Google+</li>
                </ul>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Contact</h3>
                <ul class="list-unstyled links">
                    <li>554A, Comflare</li>
                    <li>Avenue</li>
                    <li>01234 567 890</li>
                    <li>hi@comflare.com</li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <div class="copyright">
                    <p class="text-center">&copy;Designed By Scripteden 2016 / More Templates <a
                            href="http://www.cssmoban.com/"
                            target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/"
                                                                                    title="网页模板"
                                                                                    target="_blank">网页模板</a></p>
                    <!--ul class="list-inline pull-right">
                        <li>Privacy Policy </li>
                        <li>Terms Of Use</li>
                    </ul-->
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- javascript -->
<script src="/js/jquery-v1.11.3.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.js"></script>
<script src="/js/isotope.pkgd.js"></script>
<script type="text/javascript" src="/js/jquery.cslider.js"></script>
<script src="/js/custom.js"></script>
</body>
<script>

$("#treeMenu .sort").click(function(){
    //$(this).attr("value");
    location.href="articlePage?page=1&size=6&sortId="+$(this).attr("value");
})
$(".articles").click(function(){
    $(this).attr("value");
    console.log($(this).attr("value"));
    location.href="detail?id="+ $(this).attr("value");
   // $(this).href="detail?id="+ $(this).attr("value");
    // $.ajax({
    //     url: "detail",
    //     type:"post",
    //     data:{id:$(this).attr("value")}
    // })
})

</script>
</html>
